<template>
  <!-- 回收站 (个人) -->
  <div v-loading="pageLoading">
    <!-- 头部导航 -->
    <NavigationComponent :pageType="pageType">
      <div class="create_box">
        <el-button type="danger" :icon="Delete" :disabled="judgePermission('recycle')" @click="getDelete(1)">
          <span class="create_text">清空回收站</span>
        </el-button>
      </div>
    </NavigationComponent>

    <!-- 搜索 -->
    <div class="search-top">
      <el-input
        placeholder="请输入搜索内容"
        :prefix-icon="Search"
        v-model="searchValue"
        class="inputClass"
        @keyup.enter.native="getTableData('reset')"
      />
    </div>

    <!-- 表格数据 -->
    <div class="table_box">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        :row-style="{ height: '52px' }"
        :header-row-style="{ height: '52px' }"
        @selection-change="getSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>

        <el-table-column
          :label="$t('teamDoc.recycle.fileName')"
          prop="realName"
          show-overflow-tooltip
          :sortable="tableDataSelection.length == 0"
          min-width="200"
        >
          <template v-slot:header="scope">
            <span v-if="tableDataSelection.length == 0">{{ $t('teamDoc.recycle.fileName') }}</span>
            <div v-else class="btn-header">
              <el-button class="btn-box" :disabled="judgePermission('recycle')" :icon="Refresh" @click="getRefresh">
                {{ $t('teamDoc.recycle.restore') }}
              </el-button>

              <el-button class="btn-box" :disabled="judgePermission('recycle')" :icon="Delete" @click="getDelete(0)">
                {{ $t('teamDoc.recycle.del') }}
              </el-button>
            </div>
          </template>

          <template #default="scope">
            <svg-icon :icon-class="selectSvgIcons(scope.row)" style="font-size: 30px; vertical-align: middle; margin-right: 6px" />
            {{ scope.row.realName }}
          </template>
        </el-table-column>

        <el-table-column prop="path" :label="$t('teamDoc.recycle.originalPath')" min-width="100" show-overflow-tooltip>
          <template v-slot:header="scope">
            <span v-if="tableDataSelection.length == 0">{{ $t('teamDoc.recycle.originalPath') }}</span>
            <span v-else></span>
          </template>

          <template #default="scope">
            <span> {{ scope.row.path }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="deleteTime"
          :label="$t('teamDoc.recycle.delTime')"
          :sortable="tableDataSelection.length == 0"
          show-overflow-tooltip
          min-width="100"
        >
          <template v-slot:header="scope">
            <span v-if="tableDataSelection.length == 0">{{ $t('teamDoc.recycle.delTime') }}</span>
            <span v-else></span>
          </template>

          <template #default="scope">
            <span> {{ scope.row.deleteTime }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="size"
          :label="$t('teamDoc.recycle.size')"
          :sortable="tableDataSelection.length == 0"
          show-overflow-tooltip
          min-width="100"
        >
          <template v-slot:header="scope">
            <span v-if="tableDataSelection.length == 0">{{ $t('teamDoc.recycle.size') }}</span>
            <span v-else></span>
          </template>

          <template #default="size">
            {{ proxy?.$yuUtils.filterSizeUnit(size.row.size) }}
          </template>
        </el-table-column>

        <el-table-column prop="deleteBy" :label="$t('teamDoc.recycle.deleter')" min-width="100" show-overflow-tooltip>
          <template v-slot:header="scope">
            <span v-if="tableDataSelection.length == 0">{{ $t('teamDoc.recycle.deleter') }}</span>
            <span v-else></span>
          </template>

          <template #default="scope">
            {{ scope.row.deleteBy }}
          </template>
        </el-table-column>

        <el-table-column prop="createBy" :label="$t('teamDoc.recycle.creator')" min-width="100" show-overflow-tooltip>
          <template v-slot:header="scope">
            <span v-if="tableDataSelection.length == 0">{{ $t('teamDoc.recycle.creator') }}</span>
            <span v-else></span>
          </template>

          <template #default="scope">
            {{ scope.row.createBy }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <el-pagination
      @size-change="getSizeChange"
      @current-change="getPageChange"
      :current-page="commonParams.page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="commonParams.size"
      layout="total, prev, pager, next, sizes"
      :total="commonParams.total"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch, defineProps, defineEmits, getCurrentInstance } from 'vue';
import { Delete, Search, Refresh } from '@element-plus/icons-vue';
import NavigationComponent from '../personal-component/navigation-component.vue'; // 导航信息
import { ApiPerSelectRecycle, ApiPerDelRecycle, ApiPerRecoverFile } from '@/api/personDoc/personDocApi';

const { proxy } = getCurrentInstance() as any;
const pageLoading = ref(false);
const searchValue = ref('');
const tableData = ref([]);
const tableDataSelection = ref([]);

const commonParams = reactive({
  //外层列表
  page: 1,
  size: 20,
  total: 0
});

const props = defineProps({
  pageType: String
});

// table 选择状态
const getSelectionChange = (val: any) => {
  tableDataSelection.value = val;
};

/**icon转换 */
const selectSvgIcons = (v: any) => {
  return proxy.$yuUtils.selectSvgIcon(v);
};

// 删除
const getDelete = (isDelete) => {
  let ids = tableDataSelection.value.map((item) => item.id);
  // 清空回收站时，没有数据不能删除
  if (tableData.value.length == 0 && isDelete) {
    ElMessage.success(proxy.$t('teamDoc.recycle.tip2'));
    return;
  }

  let oParam = {
    type: 'personal',
    ids: ids.join(),
    recycleType: isDelete // 0 为选择删除  1 为清空回收站
  };

  ElMessageBox.confirm(proxy.$t('teamDoc.recycle.tip3'), proxy.$t('commen.title'), {
    confirmButtonText: proxy.$t('commen.confirm'),
    cancelButtonText: proxy.$t('commen.cancel'),
    type: 'warning'
  }).then(() => {
    ApiPerDelRecycle(oParam).then((res) => {
      getTableData('reset');
      ElMessage.success(proxy.$t('teamDoc.recycle.tip4'));
    });
  });
};

// 还原
const getRefresh = () => {
  let ids = tableDataSelection.value.map((item) => item.id);
  let oParam = {
    type: 'personal',
    ids: ids.join()
  };
  ApiPerRecoverFile(oParam).then((res) => {
    if (res.code == 200) {
      getTableData('reset');
      ElMessage.success(proxy.$t('teamDoc.recycle.tip1'));
    }
    if (res.code == 500) {
      ElMessage.error('上层文件已删除,暂时无法恢复!');
      return;
    }
  });
};

// 获取table列表数据
const getTableData = (reset: any) => {
  pageLoading.value = true;
  if (reset == 'reset') {
    commonParams.page = 1;
    commonParams.size = 10;
  }
  // 获取table列表数据
  let oParam = {
    page: commonParams.page - 1,
    size: commonParams.size,
    type: 'personal',
    sortDesc: 'delete_time',
    realName: searchValue.value
  };

  ApiPerSelectRecycle(oParam).then((res) => {
    if (res.code == 200) {
      tableData.value = res.data.rows;
      commonParams.total = res.data.total;
      pageLoading.value = false;
    }
  });
};

// 权限控制
const judgePermission = (str) => {
  if (props.pageType == 'team') {
  }
  // if (this.pageType == "team")
  //     {
  //       return !this.$yuUtils.documentsPermissionFunc([str], this.$store.state.teamRole.myRoleList);
  //     } else
  //     {
  //       return false;
  //     }
  // console.log('🚀 ~ getDelete ~ isDelete清空回收站:', str);
};

// 切换页数
const getSizeChange = (val) => {
  commonParams.size = val;
  getTableData(null);
};

// 切换条数
const getPageChange = (val) => {
  commonParams.page = val;
  getTableData(null);
};

onMounted(() => {
  getTableData('reset');
  // 访问 props
  // console.log('传递的值pageType:', props.pageType);
});
</script>

<style scoped lang="scss">
.search-top {
  display: flex;
  align-items: center;
  height: 48px;
  padding-right: 20px;
  margin-left: 20px;
  border-bottom: 1px solid #eee;

  .inputClass {
    width: 220px;
  }

  :deep(.el-input__wrapper) {
    box-shadow: none;
    border: none;
  }
}

.table_box {
  overflow: auto;
  height: calc(100vh - 210px);
  margin-left: 20px;

  .btn-header {
    height: 32px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 999;
    padding: 0px;

    .btn-box {
      border: none;
      display: flex !important;
      align-items: center !important;
      color: #666;
      font-size: 14px;
      padding: 0px;
      margin-right: 20px;
      cursor: pointer;
      white-space: nowrap;
      font-weight: 400;

      .btn-icon {
        margin-right: 6px;
        color: #999;
        font-size: 15px;
      }

      .svg-icon {
        width: 15px;
        height: 15px;
        margin-right: 6px;
      }
    }

    .btn-box:hover {
      color: rgb(102, 152, 255);
    }

    .btn-box:hover .svg-icon {
      color: rgb(102, 152, 255);
    }

    .btn-box:hover .btn-icon {
      color: rgb(102, 152, 255);
    }
  }
}

.el-pagination {
  // margin-top: 25px;
  padding: 0px 16px;
}

.path {
  font-size: 14px;
  color: #606266;
  padding: 20px 0 0;
}

:deep(.el-button.is-disabled.el-button--text) {
  color: #c0c4cc;
  cursor: not-allowed;

  .icon {
    color: #c0c4cc;
  }

  &:hover {
    color: #c0c4cc;

    .icon {
      color: #c0c4cc;
    }
  }
}
</style>
